<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery-1.11.1.min.js"></script>
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div>
        <span id="pps"></span>
        <form>
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>名字</th>
                        <th>阿帕云网站排名</th>
                        <th>url</th>
                        <th>国家</th>
                    </tr>
                </thead>
                <tbody id="tbMain"></tbody>
            </table>

        </form>
    </div>
    <button id="btn">查询</button>
    <script>
        $(function () {
            $('#btn').click(function () {
                $.ajax({
                    url: 'http://localhost:3000',
                    success: function (da) {
                        var tbody = document.getElementById('tbMain');
                        // var arr=[];
                        // for(var i=0;i<da.length;i++){
                        //     arr[i]=da[i]
                        // }
                        console.log(da);
                        for (var i = 0; i < da.length; i++) { //遍历一下json数据 
                      var trow = getDataRow(da[i]); //定义一个方法,返回tr数据 
                       tbody.appendChild(trow);
                     }
                        // $("#pps").text(arr[1].name+" "+arr[1].url);

                    }
                });
            })
        })

        function getDataRow(h) {
            var row = document.createElement('tr'); //创建行 
            var idCell = document.createElement('td'); //创建第一列id 
            idCell.innerHTML = h.id; //填充数据 
            row.appendChild(idCell); //加入行 ，下面类似 
            var nameCell = document.createElement('td'); //创建第二列name 
            nameCell.innerHTML = h.name;
            row.appendChild(nameCell);
            var alexaCell = document.createElement('td'); //创建第三列alexa
            alexaCell.innerHTML = h.alexa;
            row.appendChild(alexaCell);
            var urlCell = document.createElement('td'); //创建第四列url 
            urlCell.innerHTML = h.url;
            row.appendChild(urlCell);
            var countryCell = document.createElement('td'); //创建第五列country
            countryCell.innerHTML = h.country;
            row.appendChild(countryCell);
            //到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮 
            var delCell = document.createElement('td'); //创建第四列，操作列 
            row.appendChild(delCell);
            var btnDel = document.createElement('input'); //创建一个input控件 
            btnDel.setAttribute('type', 'button'); //type="button" 
            btnDel.setAttribute('value', '删除');
            var addCell = document.createElement('td');
            row.appendChild(addCell);
            var btnAdd = document.createElement('input'); //创建一个input控件 
            btnAdd.setAttribute('type', 'button'); //type="button" 
            btnAdd.setAttribute('value', '增加');
            //删除操作 
            btnDel.onclick = function () {
                if (confirm("确定删除这一行嘛？")) {
                    //找到按钮所在行的节点，然后删掉这一行 
                    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                    //btnDel - td - tr - tbody - 删除(tr) 
                    //刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除 
                }
            }
            btnAdd.onclick=function(){
                
            }
            delCell.appendChild(btnDel); //把删除按钮加入td，别忘了 
            addCell.appendChild(btnAdd);
            return row; //返回tr数据   
        }
    </script>
</body>

</html>